<template>
  <div>
    <h1> App </h1>

    <ul>
      <li>
        <!-- <RouterLink to="/home">Home</RouterLink> -->
        <!-- <RouterLink :to="{ path: '/home' }">Home</RouterLink> -->
        <!-- <button @click="$router.replace('/home')">Home</button> -->
        <!-- <button @click="$router.replace({ path: '/home' })">Home</button> -->
        <button @click="$router.replace({ name: 'home' })">Home</button>
      </li>
      <li>
        <RouterLink to="/home/first">HomeFirst</RouterLink>
      </li>
      <li>
        <RouterLink to="/home/first/one">HomeFirstOne</RouterLink>
      </li>
      <li>
        <RouterLink to="/home/first/two">HomeFirstTwo</RouterLink>
      </li>
      <li>
        <!-- <RouterLink to="/home/second">HomeSecond</RouterLink> -->
        <RouterLink :to="{ name: 'home-second' }">HomeSecond</RouterLink>
      </li>
      <li>
        <!-- <RouterLink :to="{}">Shop</RouterLink> -->
        <!-- #/shop?name=jack&age=20 -->
        <button
          @click="$router.replace({ name: 'shop', query: { name: 'jack', age: 20 } })">Shop</button>
        <!-- <button @click="$router.replace({ path: '/shop?name=jack&age=20' })">Shop</button> -->
      </li>
      <li>
        <!-- <RouterLink :to="{ path: '/user/100/shop/200' }">User</RouterLink> -->
        <button
          @click="$router.replace({ name: 'user', params: { id: 300, sid: 400 }, query: { name: 'lili', age: 21 } })">User</button>
      </li>
    </ul>

    <button @click="$router.go(-1)">后退</button>
    <!-- <button @click="$router.back()">后退</button> -->
    <!-- <button @click="history.back()">后退</button> -->
    <!-- <button @click="$router.go(0)">刷新</button> -->
    <button @click="reload">刷新</button>
    <!-- <button @click="$router.go(1)">前进</button> -->
    <button @click="$router.forward()">前进</button>
    <!-- <button @click="history.go(1)">前进</button> -->
    <!-- <button @click="forward">前进</button> -->
    <RouterView></RouterView>
  </div>
</template>
<script>
export default {
  methods: {
    reload() {
      location.reload();
    },
    forward() {
      history.forward();
    }
  }
};
</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>